
<!-- 通用：编辑浮层 -->
<handler-bar class="{dragging: dragging}"
  draggable="{fn.isEnable('drag')}"
  ondragstart="{fn.drag.start}"
  ondragend="{fn.drag.end}" style="height: {height}px">
  <style scoped>
  :scope{position: absolute;top: 0; right: 0;width: 100%; border: 1px solid #999; z-index: 1; display: none;}
  .drag{cursor: move;}
  .bar{height: 30px; background: rgba(222,222,222, 0.5); text-align: right; line-height: 30px}
  .drag, .edit, .remove{display: inline-block;}
  .drag{float: left;}
  :scope.dragging{border-style: dashed;}
  </style>
  <div class="bar">
    <div class="drag" show="{fn.isEnable('drag')}">拖拽</div>
    <div class="edit" show="{fn.isEnable('edit')}" onclick="{fn.edit}">编辑</div>
    <div class="remove" show="{fn.isEnable('remove')}" onclick="{fn.remove}">删除</div>
  </div>
  <script>
    var tag = this;
    tag.enable = opts.enable.split(',');
    tag.height = opts.height || 50;
    tag.fn = {
      isEnable: function(name){
        return tag.enable.indexOf(name) !== -1;
      },
      edit: function(e){
        pip.typeOf(opts.onEdit) === 'Function' && opts.onEdit(e);
      },
      remove: function(e){
        pip.typeOf(opts.onRemove) === 'Function' && opts.onRemove(e);
      },
      drag: {
        start: function(e){
          e.dataTransfer.effectAllowed = 'move';
      		e.dataTransfer.setData('text', '');
          tag.dragging = true;
          if(pip.typeOf(opts.dragItem) === 'String'){
            tag.parent.refs[opts.dragItem].style.opacity = 0.5;
          }
          pip.typeOf(opts.dragStart) === 'Function' && opts.dragStart(e);
        },
        end: function(e){
          tag.dragging = false;
          if(pip.typeOf(opts.dragItem) === 'String'){
            tag.parent.refs[opts.dragItem].style.opacity = 1;
          }
          pip.typeOf(opts.dragEnd) === 'Function' && opts.dragEnd(e);
        }
      }
    };
    tag.on('mount', function(){
      tag.parent.root.style.position = 'relative';
      tag.parent.root.addEventListener('mouseenter', function(){
        tag.root.style.display = 'block';
      }, false);
      tag.parent.root.addEventListener('mouseleave', function(){
        tag.root.style.display = 'none';
      }, false);
    });
  </script>
</handler-bar>

<!-- 模块：头部 -->
<module-head>
  <style scoped>
  :scope{height: 140px; display: block;}
  </style>
  <handler-bar if="{!onEdit}" enable="edit,remove,drag"
  height="140"
  drag-start="{fn.drag}"
  drag-item="head"
  on-edit="{fn.edit}"/>
  <div ref="head" style="height: 100px; background: #f5f5f5; padding: 20px;">
    <h2 style="font-size: 24px">{title||'标题'}</h2>
    <small style="font-size: 12px">{text||'副标题'}</small>
  </div>
  <div if="{onEdit}" class="edit-zone">
    <p>
      主标题 <input type="text" ref="title" value="{title}">
    </p>
    <p>
      副标题 <input type="text" ref="text" text="{text}">
    </p>
    <p>
      <button type="button" onclick="{fn.save}">保存</button>
    </p>
  </div>
  <script>
  var tag = this;
  tag.fn = {
    drag: function(e){
    },
    edit: function(e){
      tag.update({
        onEdit: true
      });
    },
    save: function(e){
      tag.update({
        title: tag.refs.title.value,
        text: tag.refs.text.value,
        onEdit: false
      });
    }
  };
  tag.on('mount', function(){
    window.onbeforeunload = function(){
      return 1;
    };
  });
  </script>
</module-head>

<!-- 布局：单栏双栏 -->
<mail-tpl-layout-one-two-col>
<h1>one-two-col</h1>
</mail-tpl-layout-one-two-col>

<!-- 布局：单栏多行 -->
<mail-tpl-layout-one-col>
  <module-head/>
</mail-tpl-layout-one-col>

<!-- 模版布局选择 -->
<mail-tpl-layout>
  <style scoped>
  .layout-list li{margin-right: 20px; width: auto; cursor: pointer;}
  li img{border: 1px solid #ccc; padding: 5px;}
  li img.active{border-color: green}
  .layout-list p{width: 100%; text-align: center;}
  </style>
  <h4>选择模版布局</h4>
  <ul class="layout-list">
    <li each="{layout in layoutList}" onclick="{parent.fn.select}">
      <img src="{layout.img}" alt="{layout.text}" class="{active: parent.layout==layout}">
      <p>
        {layout.text}
      </p>
    </li>
  </ul>
  <p>
    <button type="button" disabled="{!layout}" onclick="{fn.ok}">确定</button>
    <button type="button">返回</button>
  </p>
  <script>
  var tag = this;
  tag.layout = null;
  // 可选布局列表
  tag.layoutList = [
    {name: 'one-col', text: '单栏多行', img: 'static/img/one-col.png'},
    {name: 'one-two-col', text: '单栏双栏', img: 'static/img/one-two-col.png'}
  ];
  tag.fn = {
    select: function(e){
      tag.layout = e.item.layout;
    },
    ok: function(){
      tag.emit('ok', tag.layout);
    }
  };
  tag.on('mount', function(){});
  </script>
</mail-tpl-layout>

<!-- 模版设计区 -->
<mail-tpl-design>
  <style scoped>
  </style>

  <div if="{!layout}">
    <mail-tpl-layout ref="选布局"/>
  </div>

  <div if="{layout}">
    <div data-is="mail-tpl-layout-{layout.name}"></div>
  </div>

  <script>
  var tag = this;
  tag.layout = null;
  tag.from = tag.app.path[1];
  tag.fn = {};
  tag.on('mount', function(){
    if(tag.from == 'blank' && !tag.layout){
      // 选择布局
    }
    tag.refs['选布局'].on('ok', function(layout){
      tag.layout = layout;
      tag.update();
    });
  });

  </script>
</mail-tpl-design>


<!-- 邮件模版列表 -->
<mail-tpl>
  <style scoped>
    .frame{display: inline-block; cursor: pointer; width: 140px; height: 200px; overflow: hidden; position: relative; border: 1px solid #eee;}
    iframe{transform-origin: 0 0; transform:scale(0.5);  position: absolute; left: 0; top: 0; border: none; z-index: -1}
    ul{
      margin: 0 20px;
      padding: 0;
    }
    li{
      display: inline-block;
      width: 140px;
      text-align: center;
    }
  </style>
  <mail-tpl-design if="{action=='add'}"/>
  <ul if="{action=='list'}">
    <li>
      <div class="frame" onclick="{fn.blankTpl}"> + 添加 </div>
      空白模版
    </li>
    <li each="{tplList}">
      <div class="frame" onclick="{fn.fromTpl}">
        <utils-iframe-html content="{snapshot}"/>
      </div>
      {title}
    </li>
  </ul>
  <script>
  var tag = this;
  tag.action = 'list';
  tag.tplList = [];
  tag.fn = {
    blankTpl: function(){
      route(tag.app.path[0] + '/add/blank');
    },
    fromTpl: function(e){
      route(tag.app.path[0] + '/add/' + e.item.id);
    },
    getList: function(){
      pip.xhr('static/mock.json')
      .on('done', function(resp){
        tag.update({
          tplList: resp['mail-tpl-list']
        });
      })
    }
  };
  tag.on('mount', function(){
    if(!tag.app.path[1]) tag.fn.getList();
    else{
      tag.update({
        action: tag.app.path[1]
      });
    }
  });
  </script>
</mail-tpl>

<test-sample>
  <mail-tpl/>
</test-sample>
